import 'package:auto_route/auto_route.dart';
import 'package:distribution_mall_flutter/generated/l10n.dart';
import 'package:distribution_mall_flutter/pages/user/login_invite_code/login_invite_code_provider.dart';
import 'package:distribution_mall_flutter/pages/user/login_invite_code/service/login_invite_code_service.dart';
import 'package:distribution_mall_flutter/utils/common_widget.dart';
import 'package:distribution_mall_flutter/widgets/click_dismiss.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

@RoutePage<bool>()
class LoginInviteCodePage extends StatefulHookConsumerWidget {
  const LoginInviteCodePage({super.key});

  @override
  ConsumerState<LoginInviteCodePage> createState() =>
      _LoginInviteCodePageState();
}

class _LoginInviteCodePageState extends ConsumerState<LoginInviteCodePage> {
  @override
  Widget build(BuildContext context) {
    ref.watch(loginInviteCodeServiceProvider);
    var codeTextEditingController = useTextEditingController();
    return ClickDisMiss(
      child: Scaffold(
        appBar: AppBar(
          leading: CommonBtnWidget.arrowBack(
            icon: Icons.arrow_back,
          ),
        ),
        body: Column(
          children: [
            const Divider(
              color: Color(0xFFE6E6EA),
              height: 1,
            ),
            Expanded(
              child: Container(
                height: 48,
                margin: const EdgeInsets.only(left: 24, right: 24, top: 87),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(S.current.enter_the_invitation_code,
                        style: const TextStyle(
                            fontSize: 20,
                            color: Color(0xFF000000),
                            fontWeight: FontWeight.w600)),
                    Container(
                      margin: const EdgeInsets.only(top: 8, bottom: 24),
                      child: Text(S.current.enter_the_invitation_code_hint,
                          style: const TextStyle(
                            fontSize: 13,
                            color: Color(0xFF868D96),
                          )),
                    ),
                    TextField(
                      controller: codeTextEditingController,
                      inputFormatters: [LengthLimitingTextInputFormatter(50)],
                      decoration: InputDecoration(
                          hintText: S.current.enter_the_invitation_code,
                          hintStyle: const TextStyle(
                              fontSize: 14, color: Color(0xFF777777)),
                          contentPadding:
                              const EdgeInsets.symmetric(horizontal: 16)),
                      onChanged: (s){
                        ref.read(loginInviteCodeNextButtonProvider.notifier).setEnable(s.isNotEmpty);
                      },
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 40),
                        width: double.infinity,
                        height: 48,
                        child: Consumer(builder: (context, ref, _) {
                          var enable =
                              ref.watch(loginInviteCodeNextButtonProvider);
                          return ElevatedButton(
                              onPressed: enable
                                  ? () {
                                      ref
                                          .read(loginInviteCodeServiceProvider)
                                          .bindInviteCode(
                                              codeTextEditingController.text);
                                    }
                                  : null,
                              child: Text(S.current.Apply));
                        }))
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
